<template>
	<div>
		<el-form label-width="80px" v-if="currentDDR" style="position: absolute;width: 300px;">
		  <el-form-item label="x">
		    <el-input-number v-model="currentDDR.ddr.transform.x" @change="handleChangeTransform('x',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="y">
		    <el-input-number v-model="currentDDR.ddr.transform.y" @change="handleChangeTransform('y',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="width">
		    <el-input-number v-model="currentDDR.ddr.transform.width" @change="handleChangeTransform('width',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="height">
		    <el-input-number v-model="currentDDR.ddr.transform.height" @change="handleChangeTransform('height',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="rotation">
		    <el-input-number v-model="currentDDR.ddr.transform.rotation" @change="handleChangeTransform('rotation',$event)"></el-input-number>
		  </el-form-item>
			<el-form-item label="draggable">
			  <el-switch v-model="currentDDR.ddr.draggable" @change="handleChangeSwitch('draggable',$event)"></el-switch>
			</el-form-item>
			<el-form-item label="rotatable">
			  <el-switch v-model="currentDDR.ddr.rotatable" @change="handleChangeSwitch('rotatable',$event)"></el-switch>
			</el-form-item>
			<el-form-item label="resizable">
			  <el-switch v-model="currentDDR.ddr.resizable" @change="handleChangeSwitch('resizable',$event)"></el-switch>
			</el-form-item>
			<el-form-item label="active">
			  <el-switch v-model="currentDDR.ddr.active" @change="handleChangeSwitch('active',$event)"></el-switch>
			</el-form-item>
			<el-form-item label="acceptRatio">
			  <el-switch v-model="currentDDR.ddr.acceptRatio" @change="handleChangeSwitch('acceptRatio',$event)"></el-switch>
			</el-form-item>
			<el-form-item label="axis">
			  <el-checkbox-group v-model="currentDDR.axis" @change="handleChangeAxis">
					<el-checkbox label="x" value="x"></el-checkbox>
					<el-checkbox label="y" value="y"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="参数名称">
			  <el-input v-model="currentDDR.point.name" placeholder="输入参数名称" @input="handleChangePoint('name',$event)"></el-input>
			</el-form-item>
			<el-form-item label="参数编码">
			  <el-input v-model="currentDDR.point.code" placeholder="输入参数编码" @input="handleChangePoint('code',$event)"></el-input>
			</el-form-item>
			<el-form-item label="参数单位">
			  <el-input v-model="currentDDR.point.unit" placeholder="输入参数单位" @input="handleChangePoint('unit',$event)"></el-input>
			</el-form-item>
			<el-form-item label="小数位数">
			  <el-input-number v-model="currentDDR.point.decimal" placeholder="输入保留小数位数" @input="handleChangePoint('decimal',$event)" :min="0"></el-input-number>
			</el-form-item>
		</el-form>
		<div style="position: absolute;left: 400px;">
			<el-button @click="duiqiBorder('left')">左对齐</el-button>
			<el-button @click="duiqiBorder('right')">右对齐</el-button>
			<el-button @click="duiqiBorder('top')">上对齐</el-button>
			<el-button @click="duiqiBorder('bottom')">下对齐</el-button>
		</div>
		
		<div @mousedown="handleCanvasMouseDown" ref="canvas-container"
			style="margin-left: 300px;position: relative;height: 600px;border: 1px solid red;top: 40px;">
			
			<DDR
				v-for="item in list"
				:key="item.id"
				:draggable="item.ddr.draggable"
				:rotatable="item.ddr.rotatable"
				:resizable="item.ddr.resizable"
				:active="item.ddr.active"
				:acceptRatio="item.ddr.acceptRatio"
				:parent="item.ddr.parent"
				:id="item.id"
				:value="item.ddr.transform"
				:grid="item.ddr.grid"
				:axis="item.ddr.axis"
				:beforeActive="beforeActiveMy"
				@drag="handleDrag"
				@dragstart="handleDragStart(item)"
				@dragend="handleDragEnd"
				@rotate="handleRotate"
				@rotateend="handleRotateEnd"
				@resize="handleResize"
				@resizeend="handleResizeEnd"
				class="myddr"
			>
				<BaseTable @dblclick="handleDblClick(item)" v-if="item.type === 'table'" :data="item"></BaseTable>
				<BaseChart v-if="item.type === 'chart'" :data="item"></BaseChart>
				<BaseMap v-if="item.type === 'map'" :data="item"></BaseMap>
			</DDR>
			
		</div>
	</div>
</template>

<script>
	import mockData from '@/mockdata'
	import duiqi from '@/mixins/duiqi'
	import application from '@/mixins/application'
	
	// 数据格式
	import jsonTable from '@/components/Table/json'
	import jsonChart from '@/components/Charts/json'
	import jsonMap from '@/components/Maps/json'
	
	export default {
		name: 'Layout',
		mixins: [duiqi,application],
		data() {
			return {
				currentDDR: null,
				list: [],
				mockData, // mock实时数据
			}
		},
		created() {
			// 创建图形
			this.list.push(
				Object.assign(JSON.parse(JSON.stringify(jsonTable)), {
					id: Date.now() + String(Math.random()),
				}),
				Object.assign(JSON.parse(JSON.stringify(jsonChart)), {
					id: Date.now() + String(Math.random()),
				}),
				Object.assign(JSON.parse(JSON.stringify(jsonMap)), {
					id: Date.now() + String(Math.random()),
				})
			)
		},
		methods: {
			handleDblClick(item) {
				item.ddr.draggable = false
			},
			beforeActiveMy(itemId) {
				// 失活当前选中组件
				this.deactiveCurrent()
				const target = this.list.find(v => v.id === itemId)
				target.ddr.active = true
				this.currentDDR = JSON.parse(JSON.stringify(target)) // 避免脏操作
				return true
			},
			handleDragStart(item) {
			},
			handleDrag(event, transform) {
				this.currentDDR.ddr.transform = transform;
			},
			handleDragEnd() {
				// 同步数据
				this.syncDataTransform()
			},
			handleResize(event, transform) {
				this.currentDDR.ddr.transform = transform;
			},
			handleResizeEnd(event, transform) {
				// 同步数据
				this.syncDataTransform()
			},
			handleRotate(event, transform) {
				this.currentDDR.ddr.transform = transform;
			},
			handleRotateEnd() {
				// 同步数据
				this.syncDataTransform()
			},
			handleChangeTransform(attr,newValue) {
				const target = this.list.find(v => v.id === this.currentDDR.id)
				target.ddr.transform = {
					...target.ddr.transform,
					[attr]: newValue,
				}
			},
			handleChangeSwitch(attr,newValue) {
				const target = this.list.find(v => v.id === this.currentDDR.id)
				target.ddr[attr] = newValue
			},
			handleChangeAxis(newValue) {
				const target = this.list.find(v => v.id === this.currentDDR.id)
				target.ddr.axis = newValue.join('')
			},
			handleChangePoint(attr,newValue) {
				const target = this.list.find(v => v.id === this.currentDDR.id)
				target.point[attr] = newValue
				
				if(attr === 'code') {
					// 参数编码变更，尝试给参数赋值
					target.point.value = this.mockData[newValue]?.value ?? '-'
				}
				try{
					if(target.point.value !== '-') {
						// 尝试格式化参数值
						target.point.value = Number(target.point.value).toFixed(target.point.decimal)
					}
				}catch(e){
					
				}
			},
			/*画布 mouse down*/
			handleCanvasMouseDown() {
				this.deactiveCurrent()
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.myddr {
		/* background-color: #4c8120; */
	}
</style>